<template>
  <view class="gobal-container">
    <template v-for="(item, index) in list">
      <view class="item" :key="index" @tap="gotoDetail(item)">
        <template v-if="!isShow">
          <view class="item_lf">
            <view class="line"></view>
            <text>{{ item.school.name || '' }}</text>
          </view>
          <view class="item-rg">
            <text>{{item.annual}}</text>
            <u-icon name="arrow-right" color="#999" v-if="isShowArrow"></u-icon>
          </view>
        </template>
        <template v-else>
          <view class="item_lf">
            <view class="line"></view>
            <text>{{ item.school.name || '' }}</text>
          </view>
          <view class="item_center">
            <text>{{ item.evaluation_name || item.year_period }}</text>
          </view>
          <view class="item-rg">
            <text>{{item.annual}}</text>
            <u-icon name="arrow-right" color="#999"></u-icon>
          </view>
        </template>
      </view>
    </template>
    <u-loadmore :status="loadingStatus" marginTop="20" />
  </view>
</template>

<script>
  import props from './props.js';
  export default {
    name: "GobalList",
    mixins: [ props ],
    data() {
      return {
        list: []
      };
    },
    methods: {
      gotoDetail( item ) {
        this.$emit( 'click', item )
      },
      setNewDataList() {
        const keys = Object.entries( this.configOptions )
        this.list = this.dataList.map( item => {
          keys.forEach( ( [ k, v ] ) => ( item[ k ] = item[ v ] ) )
          return item
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .gobal-container {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 20rpx;
    font-size: 28rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100rpx;
      border-bottom: 1px solid #e6e6e6;
	  .item_lf {
		  display: flex;
		  flex: 1;
		  justify-content: flex-start;
	  }
	  .item_center {
		  display: flex;
		  flex: 1;
		  justify-content: center;
	  }
	  .item-rg {
	  	display: flex;
		flex: 1;
		justify-content: flex-end;
	  }
		
      .line {
        width: 2px;
        height: 30rpx;
        background-color: #376eff;
        margin-right: 30rpx;
      }

      &_lf {
        flex: 2;
        display: flex;
        align-items: center;
      }

      &-rg {
        flex: 1;
        display: flex;
        align-items: center;

        text {
          margin-right: 20rpx;
          color: #999;
        }
      }

      &_center {
        flex: 1;
      }
    }
  }
</style>